<template>
	<b-layout-index>
		<navbar bgcolor="#fff" :title="$t('订单中心')"></navbar>
		<u-sticky bgColor="#fff">
			<u-tabs :current="current" @click="click" :list="list1"></u-tabs>
		</u-sticky>
		<view v-if="datalist.length>0">


			<block v-for="(item,index) in datalist">
				<view class="bg-white mg-top-10">

					<u-cell-group :customStyle="{'alignItems':'normal'}">
						<u-cell :customStyle="{'padding':'5px'}">
							<view slot="title" class="font-size-12 b">
								<text>{{$t('订单号')}}:{{item.order.sn}}</text>
								<text class="u-error">{{$t(stateList[item.order.status])}}</text>
							</view>
						</u-cell>


						<u-cell v-for="(itema,indexa) in item.details"
							:titleStyle="{'alignItems':'normal','padding':'5px'}" :customStyle="{'padding':'5px'}">

							<view slot="icon" class="mg-5">
								<u--image width="40" height="40" :src="itema.image" radius="10"
									errorIcon="https://cdn.uviewui.com/uview/album/1.jpg">
								</u--image>
							</view>
							<view slot="title" class="font-size-14">
								<text>{{itema.goodsName}}</text>
							</view>
							<view slot="value" class="font-size-12">
								<text class="priceA">{{itema.price}}</text>*<text>{{itema.quantity}}</text>
							</view>

						</u-cell>

						<u-cell>
							<view slot="title" class="font-size-12">
								<text>{{$t("总额")}}</text>
							</view>
							<view slot="value" class="font-size-12">
								<text class="price priceA">{{item.order.paymentAmount}}</text>
							</view>
						
						</u-cell> 
					</u-cell-group>
				</view>

			</block>
		</view>
		<view class="mg-top-30" v-if="datalist.length==0">

			<u-empty mode="order">
			</u-empty>
		</view>

	</b-layout-index>
</template>

<script>
	import {
		findByOrderMyList
	} from "@/api/order.js";
	export default {
		data(o) {

			return {
				stateList: {
					0: "待付款",
					1: "付款中",
					2: "已付款",
					3: "未付款"
				},
				list1: [{
						icon: 'icon-qianbao',
						name: this.$t("待付款"),
						status: 0  
					},
					{
						icon: 'icon-chazhao',
						name: this.$t("付款中"),
						status: 1
					},
					{
						icon: 'icon-tuisong',
						name: this.$t("已付款"),
						status: 2
					},
					{
						icon: 'icon-shangcheng',
						name: this.$t("未付款"),
						status: 3
					}
				],
				current: 0,
				datalist: []
			}
		},
		onLoad: function(options) {


			let index = parseInt(options.index)
			if (isNaN(index)) {
				index = 0;
			}

			this.current = index
			console.log("Organ", index)
			this.getData()

		},
		methods: {
			click(item) {
				var index = item.index;
				console.log('item', item);
				this.getData(index)
			},
			getData: function(index = 0) {
				uni.showLoading()
				var the = this;
				findByOrderMyList(index).then(res => {
					console.log(res)
					the.datalist = res;
					uni.hideLoading()
				}).catch(e => {
					the.datalist = []
					uni.hideLoading()
				})
			}
		}
	}
</script>

<style>
	.b {

		display: flex;
		justify-content: space-between;
	}

	.u-cell__body {
		padding: 1px 10px 1px 10px !important;
	}
</style>